<template>
  <div>
    <div class="modal-body">
      <!-- <p class="import-type-exit" @click="onTypeItemReturn">
        <span class="icon aufontAll h-icon-all-arrow-left-o"></span>
        <span v-if="importType === 'LOCAL'"> 本地导入</span>
        <span v-else> 应用市场</span>
      </p> -->
      <div class="steps">
        <a-steps size="small" :current="0" :status="'process'">
          <a-step :title="$t('languages.Apps.UploadFile')"></a-step>
          <a-step :title="$t('languages.Apps.VerifyFile')"></a-step>
          <a-step :title="$t('languages.Apps.Import')"></a-step>
        </a-steps>
      </div>
      <div class="data-upload">
        <div class="upload-left">所属分组:</div>
        <div class="upload-right">
          <a-select  style="width:100%" v-model="groupId">
            <template v-for="item in groupList">
              <a-select-option
                v-show="item.code!=='all'"
                :value="item.id"
                :key="item.id"
              >{{ item.name }}</a-select-option>
            </template>
          </a-select>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="data-upload">
        <div>
          <div class="upload-left">{{ $t('languages.Apps.UploadLocalFile') }}:</div>
          <div class="upload-right">
            <div class="upload-dragger">
              <a-upload-dragger
                :multiple="false"
                :accept="accept"
                :fileList="fileList"
                :action="uploadUrl"
                :headers="header"
                :beforeUpload="beforeUpload"
                @change="handleChange"
                :remove="removeFile"
              >
                <div class="tip">
                  <i class="aufontAll h-icon-all-export_o"></i>
                  {{ $t('languages.Apps.ClickOrDragFile') }}
                  <div class="upload-tip" v-if="importType==='MARKET'">提示：仅支持安装云枢应用市场中心下载的应用</div>
                  <div class="upload-tip" v-else>支持.zip格式，文件大小不限</div>
                </div>
              </a-upload-dragger>
              <!-- <div class="upload-tip" v-if="importType==='MARKET'">提示：仅支持安装云枢应用市场中心下载的应用</div>
              <div class="upload-tip" v-else>支持.zip格式，文件大小不限</div> -->
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div>
        <a-button type="primary" :disabled="!fileName" @click="nextStep">{{ $t('languages.Apps.NextStep') }}</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import AppsApi from '@/apis/apps';
import { listApi as Application } from '@cloudpivot/api';
import { Icon, Upload } from '@h3/antd-vue';
import {
  Component, Inject, Prop, Vue, Watch
} from 'vue-property-decorator';
import { namespace } from 'vuex-class';






const AppCenterModule = namespace("Apps/AppCenter");

const MenuModule = namespace('Apps/AppItem');

@Component({
  name: 'DataUpload',
  components: {
    AUpload: Upload,
    AIcon: Icon
  }
})

export default class DataUpload extends Vue {
  @MenuModule.State('floders') floders: any;
  @AppCenterModule.State("appGroupList") groupList: any;

  @Prop() importType !: string;

  @Inject()
  getgroupInfo!: Function;

  accept: any = '.zip';
  fileList:Array<any> = []; // 文件列表
  folderId:string = '';
  groupId: any = ''
  fileName: string = ''

  @Watch('groupList', {deep: true, immediate: true})
  groupListChane(){
    this.groupId = this.getgroupInfo().id;
  }

  // 上传接口
  get uploadUrl() {
    return AppsApi.fileUploadUrl;
  }

  get header() {
    const token = localStorage.getItem('token');
    return {
      Authorization: `Bearer ${token}`
    };
  }

  handleChange({ file, fileList }:any) {
    if (file.status !== 'uploading') {
      this.fileList = fileList;
    }
    // 上传完成逻辑
    if (file.status === 'done') {
      this.fileName = file.response; // 返回文件名
    } else if (file.status === 'removed') {
      Application.deleteTemporaryFile({fileName: file.response});
      this.fileName = ''
    }
  }

  // 删除文件
  async removeFile(file:any) {
    this.fileList = [];
  }

  /**
   * 文件上传前校验文件类型
   */
  beforeUpload(file:any) {
    this.fileList = [...this.fileList, file];
    this.fileList = this.fileList.slice(-1);
  }
  
  onTypeItemReturn() {
    this.$emit('onTypeItemReturn')
  }

  nextStep() {
    this.$emit('nextStep', {
      fileName: this.fileName,
      groupId: this.groupId,
    })
  }
}
</script>

<style lang="less" scoped>
  .modal-body{
    margin: auto 24px;
    .import-type-exit{
      display: inline-block;
      margin-bottom: 10px;
      font-size: 16px;
      color: #000;
      cursor: pointer;
    }
    .import-type-exit:hover{
      color: #17BC94;
    }
    .steps{
      width: 50%;
      margin: 30px auto;
    }
  }
  .data-upload {
    margin: 24px auto;
    & .folders {
      margin-bottom: 20px;
    }
    & .upload-left {
      width: 98px;
      float: left;
      vertical-align: middle;
      height: 22px;
      line-height: 22px;
      margin-right: 2px;
    }
    & .upload-right {
      width: 490px;
      float: left;
      vertical-align: middle;
      & .ant-upload-list {
        margin-top: 20px;
      }
      & .upload-dragger {
        display: block;
        position: relative;
        & .ant-upload.ant-upload-drag {
          background:rgba(255,255,255,1);
          border:1px solid rgba(217,217,217,1);
        }
        & .ant-upload.ant-upload-drag .ant-upload-drag-container div {
          text-align: center;
          line-height: 28px;
          height:28px;
          color: rgba(0, 0, 0, 0.65);
        }
        & .ant-upload.ant-upload-drag .ant-upload-btn {
          padding: 0;
        }
      }
    }
    & .upload-tip {
      position: absolute;
      bottom: -30px;
      left: 0;
      font-size: 12px;
      color: rgba(0, 0, 0, .45);
    }

    .clearfix {
      clear: both;
    }
  }
</style>

<style lang="less" scoped>
  .data-upload {
    /deep/ .ant-upload-list-item-info .anticon-paper-clip {
      top: 3px;
    }
    /deep/ .ant-upload-list-item-info{
      margin-top: 30px;
    }
  }
</style>